<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>章节大纲生成 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="common.css" rel="stylesheet">
    <style>
        .chapter-item {
            cursor: grab;
        }
        .chapter-item:active {
            cursor: grabbing;
        }
        .chapter-item.dragging {
            opacity: 0.5;
            border: 2px dashed var(--border-secondary);
        }
    </style>
</head>
<body>
    <div class="page-container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="container navbar-container">
                <a href="home.html" class="navbar-brand">AI网文小说创作助手</a>
                <div class="navbar-nav">
                    <a href="novel-list.html" class="nav-link">我的小说</a>
                    <a href="genre-selection.html" class="nav-link active">创作中心</a>
                    <a href="profile.html" class="nav-link">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=80&q=80" alt="用户头像" class="avatar">
                    </a>
                </div>
            </div>
        </nav>

        <!-- 主要内容 -->
        <main class="main-content">
            <div class="container">
                <!-- 步骤条 -->
                <div class="steps">
                    <div class="step completed">
                        <div class="step-number">1</div>
                        <div class="step-label">选择流派</div>
                    </div>
                    <div class="step completed">
                        <div class="step-number">2</div>
                        <div class="step-label">输入梗概</div>
                    </div>
                    <div class="step completed">
                        <div class="step-number">3</div>
                        <div class="step-label">故事要素</div>
                    </div>
                    <div class="step active">
                        <div class="step-number">4</div>
                        <div class="step-label">章节大纲</div>
                    </div>
                    <div class="step">
                        <div class="step-number">5</div>
                        <div class="step-label">章节细纲</div>
                    </div>
                    <div class="step">
                        <div class="step-number">6</div>
                        <div class="step-label">生成正文</div>
                    </div>
                </div>

                <!-- 页面标题 -->
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-center">章节大纲生成</h1>
                    <p class="text-center text-gray-600 mt-2">AI将为您生成符合网文节奏的章节大纲，您可以根据需要进行调整</p>
                </div>

                <!-- 步骤导航 -->
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h3 class="font-bold mb-2">创作进度</h3>
                    <div class="flex flex-wrap gap-2">
                        <a href="genre-selection.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 流派：都市-异能流
                        </a>
                        <a href="story-outline.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 梗概：已完成
                        </a>
                        <a href="inspiration-generation.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-1"></i> 故事要素：已完成
                        </a>
                        <span class="text-sm px-3 py-1 bg-blue-50 border border-blue-200 rounded flex items-center font-bold">
                            <i class="fas fa-pen text-blue-500 mr-1"></i> 当前：章节大纲
                        </span>
                        <a href="detailed-outline.html" class="text-sm px-3 py-1 bg-white border rounded hover:bg-gray-100 flex items-center opacity-75">
                            <i class="fas fa-circle text-gray-300 mr-1"></i> 下一步：章节细纲
                        </a>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">您可以随时点击切换到其他步骤，系统会自动保存您的进度</p>
                </div>

                <!-- 当前选择的流派和梗概 -->
                <div class="card mb-8">
                    <div class="card-header">
                        <h2 class="card-title">当前创作信息</h2>
                        <a href="story-outline.html" class="text-blue-600 hover:text-blue-800">
                            <i class="fas fa-edit"></i> 编辑
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="flex items-center mb-4">
                            <span class="tag tag-male mr-2">男频</span>
                            <span class="font-bold">都市-异能流</span>
                        </div>
                        <div class="border-t pt-4">
                            <h3 class="font-bold mb-2">故事梗概</h3>
                            <p class="text-gray-600">
                                大学生李天阳在一次偶然的机会下获得了一个神秘的系统，可以看到他人的情感值。从此，他的生活发生了翻天覆地的变化，不仅能够轻松应对各种人际关系，还能在危机时刻洞察他人的真实想法。在都市中游刃有余的同时，他逐渐发现这个系统背后隐藏着更大的秘密...
                            </p>
                        </div>
                        <div class="border-t pt-4 mt-4">
                            <h3 class="font-bold mb-2">故事要素</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                                <div>
                                    <p class="font-semibold text-blue-600"><i class="fas fa-book-open mr-1"></i> 情节要素</p>
                                    <p class="text-gray-600">意外获能、职场竞争、身份隐藏</p>
                                </div>
                                <div>
                                    <p class="font-semibold text-green-600"><i class="fas fa-user mr-1"></i> 角色要素</p>
                                    <p class="text-gray-600">平凡主角、神秘高手、隐世家族</p>
                                </div>
                                <div>
                                    <p class="font-semibold text-purple-600"><i class="fas fa-cogs mr-1"></i> 设定要素</p>
                                    <p class="text-gray-600">异能体系、隐秘组织、都市规则</p>
                                </div>
                                <div>
                                    <p class="font-semibold text-yellow-600"><i class="fas fa-map-marked-alt mr-1"></i> 场景要素</p>
                                    <p class="text-gray-600">高级写字楼、隐秘基地、能力对决</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 大纲长度选择 -->
                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-4">选择大纲长度</h2>
                    <div class="flex flex-wrap gap-4">
                        <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="outline-length" class="form-radio mr-2">
                            <div>
                                <span class="font-bold">短篇</span>
                                <p class="text-sm text-gray-600">10章以内，适合短小精悍的故事</p>
                            </div>
                        </label>
                        <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="outline-length" class="form-radio mr-2" checked>
                            <div>
                                <span class="font-bold">中篇</span>
                                <p class="text-sm text-gray-600">10-30章，适合中等篇幅的故事</p>
                            </div>
                        </label>
                        <label class="flex items-center p-3 border rounded-lg cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="outline-length" class="form-radio mr-2">
                            <div>
                                <span class="font-bold">长篇</span>
                                <p class="text-sm text-gray-600">30章以上，适合长篇连载的故事</p>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- 生成按钮 -->
                <div class="text-center mb-8">
                    <button id="generate-outline" class="btn btn-primary btn-lg" onclick="generateChapterOutline()">
                        <i class="fas fa-magic mr-2"></i> 生成章节大纲
                    </button>
                </div>

                <!-- 章节大纲展示区域 -->
                <div class="mb-8">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold">章节大纲</h2>
                        <div class="flex gap-2">
                            <button class="btn btn-secondary">
                                <i class="fas fa-plus mr-1"></i> 添加章节
                            </button>
                            <button class="btn btn-secondary">
                                <i class="fas fa-sort mr-1"></i> 调整顺序
                            </button>
                        </div>
                    </div>
                    <div id="chapter-container" class="chapter-list">
                        <!-- 章节列表将通过JS动态生成 -->
                        <div class="text-center text-gray-500 py-12">
                            <i class="fas fa-book text-4xl mb-4 opacity-30"></i>
                            <p>点击"生成章节大纲"按钮，AI将为您生成章节大纲</p>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-between">
                    <a href="inspiration-generation.html" class="btn btn-secondary">
                        <i class="fas fa-arrow-left mr-2"></i> 上一步
                    </a>
                    <a href="detailed-outline.html" class="btn btn-primary">
                        <i class="fas fa-arrow-right mr-2"></i> 下一步
                    </a>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-gray-800 text-white py-6">
            <div class="container text-center">
                <p class="text-gray-400">© 2023 AI网文小说创作助手. 保留所有权利.</p>
            </div>
        </footer>

        <!-- 编辑章节弹窗 -->
        <div id="edit-chapter-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
            <div class="bg-white rounded-lg p-6 max-w-md w-full">
                <h3 class="text-xl font-bold mb-4">编辑章节</h3>
                <div class="form-group">
                    <label for="chapter-title" class="form-label">章节标题</label>
                    <input type="text" id="chapter-title" class="form-control" placeholder="请输入章节标题">
                </div>
                <div class="form-group">
                    <label for="chapter-summary" class="form-label">章节概要</label>
                    <textarea id="chapter-summary" class="form-control" rows="5" placeholder="请输入章节概要"></textarea>
                </div>
                <div class="flex justify-end gap-4">
                    <button class="btn btn-secondary" onclick="document.getElementById('edit-chapter-modal').classList.add('hidden')">取消</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="common.js"></script>
</body>
</html> 